<template>
	<view v-if="info.courseName" class="box" :style="theme">
		<view class="head flex">
			<image :src="info.courseImage" class="head-l"></image>
			<view class="head-cont">
				<view class="title flex" :class="info.courseType=='1'?'': 'lv'">
					<text>{{info.courseType=='1'?'团体课':info.courseType=='4'?'私教课': '长期课'}}</text>
					<block>{{info.courseName}}</block>
				</view>
				<view class="money">
					<view class="price flex">
						<view class="ks">
							<text>{{info.courseType=='4'?formatSeconds(info.duration):info.classNum?info.classNum: 0}}</text>{{info.courseType=='4'?'':'课时'}}
						</view>
						<view v-if="info.courseType=='4'" class="lx">{{info.classType == 1?'一对多':'一对一'}}</view>
					</view>
				</view>
				<view v-if="info.time" class="info">上课时间：{{info.time}}</view>
				<view class="info">上课地点：{{info.site}}</view>
				<view class="yicon" @click="qrFun(info.teacherCode)">
					<image :src="imgHost+'/ic_erweima.png'"></image>
				</view> 
			</view>
		</view>
		<view class="card mt2">
			<view class="bt">上课学员</view>
			<view class="student flex-cb" v-for="(item, index) in info.students" :key="index">
				<image :src="imgHost+'/user.png'" class="student-l"></image>
				<view class="student-cnt">
					<view>{{item.name}}<text>{{item.sex== '1'?'男':item.sex== '2'?'女':'保密'}}</text></view>
					<view>{{item.phone}}</view>
				</view>
				<view v-if="form.isTrain== 1" @click="qdBtn(item)" class="qdBtn" :class="item.status==0?'on':''">
					{{item.status==0?'签到':'已签到'}}
				</view>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<view v-if="info.students&&info.students.length>0" class="bottomState">
			<view @click="jump('/pages/member/performance?timeId=',info.timeId)" class="footBtn">上传课堂表现</view>
		</view>
		<u-popup :show="showPops" mode="center" round="20rpx" custom-style="background: none">
			<view class="popsCnt">
				<view class="bt">
					微信扫描二维码签到
				</view>
				<view class="code_box_code">
					<canvas canvas-id="qrcode" style="width: 212px;height: 212px;margin: 0 auto;" />
				</view>
			</view>
			<view class="closeBtn" @click="showPops = false">
				<u-icon name="close-circle" size="64rpx" color="white"/>
			</view>
		</u-popup>
	</view>
</template>
<script>
	// #ifdef H5
	import wx from '@/common/jweixin.js';
	// #endif
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				info: {},
				vid: '',
				id: '',
				form: {},
				showPops: false
			}
		},
		onLoad(ops) {
			this.id = ops.id
			this.vid = ops.vid
			this.getForm()
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			qrFun: function(text) {
				this.showPops = true
				let that= this
				uni.showLoading({ title: '加载中...' })
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: that,
					text: text,
					size: 212,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						 uni.hideLoading()
					}
				})
			},
			formatSeconds(e) {
				return this.$app.formatSeconds(e);
			},
			qdBtn(e) {
				let that = this
				if (e.status == 0) {
					if (this.form.type == 1) {
						// #ifndef H5
						uni.scanCode({
							success(res) {
								console.log('code', res)
								let code = res.result
								if (res.result) {
									that.$app.ajax({
										api: that.$api.studentSignIn(),
										data: {
											param: {
												code
											}
										}
									}).then((res) => {
										if (res.errorCode === '000000') {
											that.$app.showToast('签到成功')
											that.getDetail()
										}
									}).catch(() => {})
								}
							}
						})
						// #endif
						// #ifdef H5
						this.onScan()
						// #endif
					} else {
						that.$app.ajax({
							api: that.$api.studentSignIn(),
							data: {
								param: {
									id: e.recordId
								}
							}
						}).then((res) => {
							if (res.errorCode === '000000') {
								that.$app.showToast('签到成功')
								that.getDetail()
							}
						}).catch(() => {})
					}

				}
				// let status = e.status
				// this.$app.ajax({
				// 	api: this.$api.signInCourse(),
				// 	data: {
				// 		param: {
				// 			memberId: this.userInfo.id,
				// 			venueId: this.venueId,
				// 			recordId: e.recordId,
				// 			courseId: this.info.courseId,
				// 			timeId: this.info.timeId,
				// 			status: e.status == '0' ? '1' : '0',
				// 		}
				// 	}
				// }).then((res) => {
				// 	if (res.errorCode === '000000') {
				// 		let str = '签到成功'
				// 		if (status == '1') {
				// 			str = '取消签到成功'
				// 		}
				// 		this.$app.showToast(str)
				// 		this.getDetail()
				// 	}
				// }).catch(() => {})
			},
			onScan() {
				let that = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
					desc: 'scanQRCode desc',
					success: function(res) {
						var result = res.resultStr; // 当 needResult 为 1 时，扫码返回的结果
						var resultArr = result.split(','); // 扫描结果以逗号分割数组(一维码)
						var codeContent = resultArr[resultArr.length - 1]; // 获取数组最后一个元素，也就是最终的内容 
						let code = result
						if (result) {
							that.$app.ajax({
								api: that.$api.studentSignIn(),
								data: {
									param: {
										code
									}
								}
							}).then((res) => {
								if (res.errorCode === '000000') {
									that.$app.showToast('签到成功')
									that.getDetail()
								}
							}).catch(() => {})
						}
					},
					fail: function(response) {
						console.log("调用wx.scanQRCode扫码失败");
					},
				});
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.myCourseDetail(),
					data: {
						param: {
							memberId: this.userInfo.id,
							venueId: this.venueId,
							timeId: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.info = res.record
					}
				}).catch(() => {})
			},
			getForm() {
				this.$app.ajax({
					api: this.$api.courseTrain(),
					data: {
						param: {
							venueId: this.vid
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.form = res.record || {}
					}
				}).catch(() => {})
			}
		}

	}
</script>
<style scoped lang="scss">
	.head {
		padding: 392rpx 30rpx 0;
		background-color: #ffffff;
		position: relative;
		box-sizing: border-box;

		.head-l {
			width: 100%;
			height: 422rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.head-cont {
			width: 100%;
			z-index: 100;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 24rpx 30rpx;
			position: relative;

			.yicon {
				position: absolute;
				box-sizing: border-box;
				padding: 12rpx;
				background-color: $color;
				bottom: 0;
				right: 0;
				border-radius: 8rpx 0 0 0;

				image {
					width: 40rpx;
					height: 40rpx;
					vertical-align: top;
				}
			}

			.title {
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;

				text {
					height: 40rpx;
					line-height: 40rpx;
					background: $color;
					border-radius: 8rpx;
					display: inline-block;
					padding: 0 10rpx;
					margin-right: 20rpx;
					font-size: 22rpx;
					color: #ffff;
				}

			}

			.info {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-top: 15rpx;
				line-height: 1.5;
			}

			.money {
				margin-top: 15rpx;

				.price {
					font-size: 28rpx;

					.je {
						font-size: 36rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: $red;

						text {
							font-weight: bolder;
						}
					}

					.ks {
						font-size: 22rpx;
						color: #666666;
						height: 28rpx;
						line-height: 28rpx;

						text {
							font-size: 30rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #333333;
						}
					}

					.lx {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 18rpx;
						padding-left: 18rpx;
						border-left: 1px solid #E5E5E5;
						height: 28rpx;
						line-height: 28rpx;
					}
				}
			}

		}
	}


	.card {
		padding: 30rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		width: 690rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
	}

	.card .bt {
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 1.5;
	}

	.student {
		margin-top: 30rpx;
	}

	.student-l {
		width: 84rpx;
		height: 84rpx;
		margin-right: 20rpx;
	}

	.student-cnt {
		flex: 1;
		color: #333;
		font-size: 30rpx;
		line-height: 1.5;

		text {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-left: 12rpx;
		}
	}

	.student-cnt view:nth-of-type(2) {
		color: #999999;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.qdBtn {
		width: 108rpx;
		line-height: 52rpx;
		border-radius: 26rpx;
		border: 1rpx solid #999999;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		text-align: center;

		&.on {
			color: $color;
			border-color: $color;
		}
	}

	.bottomState {
		width: 100%;
		padding: 30rpx;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		overflow: hidden;
		z-index: 99;
	}

	.popsCnt {
		width: 600rpx;
		background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 74%, #FFFBE4 100%);
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		box-sizing: border-box;
		padding: 60rpx 0 110rpx;

		.bt {
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: Medium;
			margin-bottom: 48rpx;
			color: #333333;
		}

		image {
			width: 100%;
			border-radius: 10rpx;
			vertical-align: top;
			margin-bottom: 30rpx;
		}
	}

	.closeBtn {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 40rpx auto 0;
	}
</style>